<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

    <meta charset="UTF-8">
    <title>movies</title>
    <style>
        body {
            margin:0px;
            padding:0px;
        }
        a{
            display: block;
            padding: 10px;
            text-decoration: none;
            color: #0033FF;
        }
        .active {
            color : green;
        }
        li{
            padding: 6px;
            width: 100%;
            list-style-type: none;
        }
    </style>

    <script src="js/request.js"></script>
</head>
<body>

<!-- 用于显示播放手机作为服务器的视频,播放用夸克缓存的视频 -->

<video id="video" autoplay controls src="http://192.168.1.100:8080/downvideos/默认_3567505147.m3u8" style="width: 100%;position: fixed;margin:0px;padding:0px"> </video>
<ol id="movies_parent" style="width:90%;position: absolute;overflow-y: auto;padding-left: 15px;padding-right:15px;padding-top: 5px;margin:0 auto">
    <li>haha</li>
</ol>

<script>
    const listView = document.getElementById("movies_parent");
    const video = document.getElementById("video");

    var position = -1;

    var data = [
    ];

    function parseResult(){
        let innerString = "";
    for(let i =0; i<data.length; ++i){
        innerString+= "<li><p onclick=\"onItemClick(this)\" data-index="+i+" target=\"_blank\">"+(i + 1) +". " +data[i].title+"</p></li>"
    }

    listView.innerHTML = innerString;
    }

    function onItemClick(e) {
        // console.log(e);
        let tempPosition = parseInt(e.dataset.index)
        if (tempPosition == position) {
            return;
        }
        if (position >= 0) {
            listView.children[position].classList.remove("active")            
        }
        position = tempPosition
        listView.children[position].classList.add("active")
        video.src = data[position].url

    }
    

    // 设置列表在视频下方
    listView.style.marginTop = video.clientHeight + 5 + "px";
    listView.style.height = screen.availHeight - video.clientHeight + "px"
    // parseResult()
</script>


<!-- 获取本地夸克缓存视频列表 -->
<script type="text/javascript" src="http://load_star.gitee.io/htmlminifuncs/js/getrequest.js"></script>
<script type="text/javascript">
    getRequest("http://" + location.host
 + "/file/qurk/videos", "", function(res){
        // console.log(JSON.parse(res).data)
        data = JSON.parse(res).data
        parseResult()
    })
</script>
</body>
</html>
